<template>
	<view>
		<view v-if="trainingList.length === 0" class="no-training"> 暂无培训 </view>
		<scroll-view v-else scroll-y="true" class="training-list">
			<view v-for="training in trainingList" :key="training.id" class="training-item"
				@click="goToDetails(training.id)" style="margin-bottom: 15px">
				<!-- 第一行: 培训内容 -->
				<view class="first-row">
					<text class="content">{{ truncatedText(training.content) }}</text>
				</view>
				<!-- 第二行: 学时 -->
				<view class="second-row">
					<text class="class-hours">学时: {{ training.classHours }}</text>
				</view>
				<!-- 第三行: 起止时间 -->
				<view class="third-row">
					<text class="time-period">起止时间: {{ training.startDate }} 至 {{ training.endDate }}</text>
				</view>
				<!-- 第四行: 培训地点 -->
				<view class="fourth-row">
					<text class="address">培训地点: {{ truncatedText(training.address) }}</text>
				</view>
				<!-- 第五行: 举办单位 -->
				<view class="fifth-row">
					<text class="organizing-unit">举办单位: {{ truncatedText(training.organizingUnit) }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import isHaveBug from "../../../utils/bug";
import {
		trainingLists
	} from "@/api/work/training";
	export default {
		data() {
			return {
				trainingList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 1000,
					params: {
						startDate: "",
						endDate: "",
					},
				},
			};
		},
		mounted() {
			this.fetchSalaryData();
		},
		methods: {
			fetchSalaryData() {
				trainingLists(this.queryParams)
					.then((response) => {
						this.trainingList = response.rows;
						console.log(response.rows);
					})
					.catch((error) => {
						console.error("Error fetching salary data:", error);
					});
			},
			truncatedText(text) {
				return text.length > 15 ? text.slice(0, 15) + "..." : text;
			},
			goToDetails(id) {
				// 将考评记录传递到明细页面
				uni.navigateTo({
					url: `/pages/work/trainDetails/trainDetails?id=${id}`,
				});
			},
		},
		onNavigationBarButtonTap() {
			if (!isHaveBug("HR-APP-022")){
				uni.navigateTo({
					url: `/pages/work/sx/sx?startDate=${this.queryParams.params.startDate}&endDate=${this.queryParams.params.endDate}&type=px`,
					events: {
						timeScreen: (startDate, endDate) => {
							this.queryParams.params.startDate = startDate;
							this.queryParams.params.endDate = endDate;
							this.fetchSalaryData();
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	.no-training {
		text-align: center;
		font-size: 18px;
		color: #888;
		padding: 20px;
	}

	.training-list {
		/* padding: 15px; */
	}

	.training-item {
		margin: 20rpx 15px 0rpx;
		padding: 10px;
		border-radius: 8px;
		background-color: white;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.first-row {
		font-weight: bold;
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
	}

	.second-row,
	.third-row,
	.fourth-row,
	.fifth-row {
		margin-bottom: 5px;
		color: #555;
	}

	.class-hours {
		font-size: 14px;
	}

	.time-period,
	.address,
	.organizing-unit {
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>